<template>
    <div class="banner-wrap">
        <div class="top"></div>
        <div class="swrape">
            <div class="banner" ref="banner">
                <!-- 图片容器 -->
                <div 
                class="wrap" 
                :style="{transform:`translateX(-${move}px)`}">

                    <img :src="i" alt="" v-for="(i,index) in src" :key="index">

                </div>

                <!-- 导航点 -->
                <ul id="nav">
                    <li 
                        v-for="(p,index) in src.length" :key="index"
                        @click="updatePointer(index)"
                        :class = "pointer === index ? 'active' : '' ">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"Banner-Home",
        data(){
            return {
                src:[
                    require('@/assets/banner1.jpg'),
                    require('@/assets/banner2.jpg'),
                    require('@/assets/banner3.jpg'),
                ],
                pointer:0,
                moveLength: 0,
                isAutoPlay:true,
                timmer:null
            }
        },
        methods: {

            // 修改指针
            updatePointer(index){
                this.pointer = index
            },

            next(){
                this.pointer ++ 
                if(this.pointer > 2){
                    this.pointer = 0
                }
            }
        },
        computed:{
            // 计算移动距离
            move(){
                return this.pointer * this.moveLength
            }
        },
        mounted() {
            this.moveLength = this.$refs.banner.clientWidth
            this.timmer = window.setInterval(()=>{
                this.next()
            },3000)
        },
        beforeDestroy() {
            window.clearInterval(this.timmer)
        },
    }
</script>

<style scoped lang="less">
    .banner-wrap{
        position: relative;
        height: 58.7vw;
        .top{
            height: 34.7vw;
            background: #1272FE;
            border-bottom-left-radius: 2.7vw;
            border-bottom-right-radius: 2.7vw;
        }


        .swrape{
            width: 95%;
            margin: 0 auto;
        }

        .banner{
            height: 42.7vw;
            width:95%;
            position: absolute;
            top: 13.3vw;
            overflow: hidden;
            border-radius: 5px;
            box-shadow: 0 1.3vw 1.3vw 1.3vw rgba(0, 0, 0, 0.151);

            .wrap{
                width: 300%;
                display: flex;
                transition: .5s;

                img{
                    width: 33.333%;
                    height: 42.7vw;
                }
            }

            #nav{
                display: flex;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 8px;
                

                li{
                    width: 8px;
                    height: 8px;
                    margin-right: 2.1vw;
                    border-radius: 50%;
                    background: rgb(155, 155, 155);
                }

                .active{
                    background: #333;
                }
            }

        }
    }
</style>